import { analysisModule } from '@/services/api/api-monitor-business';
import ProCard from '@ant-design/pro-card';
import { Col, DatePicker, Row } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';
import styles from './style.less';
import { Column } from '@ant-design/charts';
import CardTitle from '@/components/CardTitle';
import RcResizeObserver from 'rc-resize-observer';

interface AnalysisModuleProps { }

const AnalysisModule: React.FC<AnalysisModuleProps> = ({ }) => {
  const [tab, setTab] = useState('选题计划');

  const [analysisData, setAnalysisDataState] = useState<MonitorData.AnalysisModule[]>([]);
  const [responsive, setResponsive] = useState(false);

  const monthFormat = 'YYYY-MM';

  const startOfYear = moment().startOf('year');
  const endOffYear = moment().endOf('year');

  useEffect(() => {
    loadData([moment(startOfYear).format('YYYY-MM'), moment(endOffYear).format('YYYY-MM')]);
  }, []);

  /**
   * 本月选题计划
   */
  const loadData = async (createdTimes: any) => {
    try {
      const response = await analysisModule({ createdTimes });
      if (response.code === 0) {
        setAnalysisDataState(response.data);
      }
    } catch (error) { }
  };



  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <ProCard
          title={<CardTitle>数据分析</CardTitle>}
          split={responsive ? 'horizontal' : 'vertical'}
          tabs={{
            activeKey: tab,
            onChange: (key) => {
              setTab(key);
            },
          }}
          extra={
            <DatePicker.RangePicker
              picker="month"
              allowClear={false}
              defaultValue={[startOfYear, endOffYear]}
              format={monthFormat}
              onChange={(date, dateString) => {
                loadData(date);
              }}
            />
          }
        >
          {analysisData.map((haha) => {
            const item = haha.data;

            if (haha.type === 1) {
              return (
                <ProCard.TabPane key={item.title} tab={item.title}>
                  {/* <Row>
                  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
                    <div className={styles.salesBar}>
                      {item.columns && (
                        <Column
                          {...{
                            height: 500,
                            data: item ? item?.columns : [],
                            autoFit: true,
                            xField: 'date',
                            yField: 'count',
                            scrollbar: {
                              type: 'horizontal',
                            },
                            label: {
                              // 可手动配置 label 数据标签位置
                              position: 'middle',
                              // 'top', 'bottom', 'middle',
                              // 配置样式
                              style: {
                                fill: '#FFFFFF',
                                opacity: 0.6,
                              },
                            },
                            xAxis: {
                              label: {
                                autoHide: true,
                                autoRotate: false,
                              },
                            },
                            meta: {
                              count: {
                                alias: `${item?.columnAlias}`,
                              },
                            },
                            minColumnWidth: 40,
                            maxColumnWidth: 40,
                          }}
                        />
                      )}
                    </div>
                  </Col>
                </Row> */}
                  <Column
                    style={{
                      height: '300px',
                      // width:'60vw',
                    }}
                    {...{
                      data: item ? item?.columns : [],
                      height: 280,
                      autoFit: true,
                      isStack: true,
                      xField: 'date',
                      yField: 'count',
                      seriesField: 'type',
                      columnWidthRatio: 0.3,
                      xAxis: {
                        label: {
                          autoHide: true,
                          autoRotate: false,
                        },
                      },
                      legend: {
                        itemHeight: 20,
                      },
                      layout: [
                        // 柱形图数据标签位置自动调整
                        {
                          type: 'interval-adjust-position',
                        }, // 数据标签防遮挡
                        {
                          type: 'interval-hide-overlap',
                        }, // 数据标签文颜色自动调整
                        {
                          type: 'adjust-color',
                        },
                      ],
                    }}
                  />
                </ProCard.TabPane>
              );
            } else {
              return (
                <ProCard.TabPane key={item.title} tab={item.title}>
                  {/* <Row>
                    <Col {...configColumn}>
                      <div className={styles.salesBar}>
                        {item.columns && (
                          <Column
                            {...{
                              height: 500,
                              data: item ? item?.columns : [],
                              xField: 'date',
                              yField: 'count',
                              minColumnWidth: 40,
                              maxColumnWidth: 40,
                              label: {
                                // 可手动配置 label 数据标签位置
                                position: 'middle',
                                // 'top', 'bottom', 'middle',
                                // 配置样式
                                style: {
                                  fill: '#FFFFFF',
                                  opacity: 0.6,
                                },
                              },
                              xAxis: {
                                label: {
                                  autoHide: true,
                                  autoRotate: false,
                                },
                              },
                              legend: {
                                itemHeight: 20,
                              },
                              meta: {
                                count: {
                                  alias: `${item?.columnAlias}`,
                                },
                              },
                            }}
                          />
                        )}
                      </div>
                    </Col>
                    <Col {...configRank}>
                      <div className={styles.salesRank}>
                        <h4 className={styles.rankingTitle}>{item.rankTitle}</h4>
                        <ul className={styles.rankingList}>
                          {item &&
                            item.ranks &&
                            item.ranks.map((j, i) => (
                              <li key={item.org}>
                                <span
                                  className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''
                                    }`}
                                >
                                  {i + 1}
                                </span>
                                <span className={styles.rankingItemTitle} title={j.org}>
                                  {j.org}
                                </span>
                                <span className={styles.rankingItemValue}>{j.count}</span>
                              </li>
                            ))}
                        </ul>
                      </div>
                    </Col>
                  </Row> */}
                  <Column
                    style={{height:'300px'}}
                    {...{
                      data: item ? item?.columns : [],
                      xField: 'date',
                      yField: 'count',
                      minColumnWidth: 40,
                      maxColumnWidth: 40,
                      label: {
                        // 可手动配置 label 数据标签位置
                        position: 'middle',
                        // 'top', 'bottom', 'middle',
                        // 配置样式
                        style: {
                          fill: '#FFFFFF',
                          opacity: 0.6,
                        },
                      },
                      xAxis: {
                        label: {
                          autoHide: true,
                          autoRotate: false,
                        },
                      },
                      legend: {
                        itemHeight: 20,
                      },
                      meta: {
                        count: {
                          alias: `${item?.columnAlias}`,
                        },
                      },
                    }}
                  />
                </ProCard.TabPane>
              );
            }
          })}
        </ProCard>
        <br />
      </RcResizeObserver>
    </>
  );
};

export default AnalysisModule;
